import { useState } from "react";
import { useUpdateEffect } from "ahooks";
import { Image, View } from "@tarojs/components";
import Taro, { useReachBottom, useRouter } from "@tarojs/taro";

import ByRow from "@/components/ui/ByRow";
import Page from "@/components/common/Page";
import ByText from "@/components/ui/ByText";
import TabsTag from "@/components/app/TabsTag";
import FooterNav from "./components/FooterNav";
import ListView from "@/components/app/ListView";

import useList from "@/hooks/useList";
import ApiMokan from "@/api/mokan";

/**
 * AlarmRecord
 */
export interface AlarmRecord {
  companyName: string;
  depName: string;
  eventCategory: string;
  eventCategoryName: string;
  eventTime: string;
  id: number;
  mangerName: string;
  mkOrgName: string;
  receiverName: string;
  startTime: string;
  supervisorName: string;
  type: string;
  typeName: string;
  url1: string;
  [property: string]: any;
}

const AlarmRecordItem = ({ source }: { source: AlarmRecord }) => {
  const { url1, companyName, managerName, depName, startTime, eventCategoryName } = source;

  const preview = () => {
    Taro.previewImage({
      current: url1,
      urls: [url1],
    });
  };

  return (
    <View className="flex mb-3 p-2 rounded-lg bg-white">
      <View className="flex-none mr-1">
        <Image
          src={source.url1}
          className="w-[310px] h-[160px] rounded-xl bg-[#eee] mr-2"
          onClick={preview}
        />
      </View>
      <View className="flex-auto">
        <View>
          <ByText truncated bold>
            {eventCategoryName}
          </ByText>
        </View>
        <ByRow className="my-2 text-xs text-second" content="between">
          <ByText>{companyName}</ByText>
          <ByText>{depName}</ByText>
        </ByRow>

        <ByText block size="xs" type="second" className="mt-2">项目经理：{source.supervisorName}</ByText>
        <ByText block size="xs" type="second" className="mt-1">管家：{managerName}</ByText>
        <ByText block size="xs" type="third" >{startTime}</ByText>
      </View>
    </View>
  );
};

const tabs = [
  { label: "全部", value: "" },
  { label: "无人施工", value: "无人施工" },
  { label: "抽烟", value: "抽烟" },
  { label: "未穿工作服", value: "未穿工作服" },
  { label: "整洁度差", value: "整洁度差" },
];
export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const [search, setSearch] = useState("");

  const { list, loading, nextPage, resetToFirst } = useList<AlarmRecord>(
    ApiMokan.alarmRecord,
    { defaultParams: [{ intentCustomerId, typeName: search }] }
  );

  useReachBottom(nextPage);

  useUpdateEffect(() => {
    resetToFirst({ intentCustomerId, typeName: search });
  }, [search]);

  console.log("==132")
  return (
    <Page
      footerSticky
      slotHeader={
        <View className="px-3 pb-3 bg-white">
          <TabsTag
            items={tabs}
            active={search}
            onChange={(e) => setSearch(e)}
          />
        </View>
      }
      slotFooter={<FooterNav active={2} intentCustomerId={intentCustomerId} />}
    >
      <ListView loading={loading} isEmpty={list.length == 0} className="m-3">
        {list.map((item) => (
          <AlarmRecordItem source={item} key={item.id} />
        ))}
      </ListView>
    </Page>
  );
};
